<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no" />
    <title>新品特区</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <style>
        /*//头部*/
        body{
            font-size: 14px;
        }
        header{
            width: 100%;
            background: #fff;
            position: relative;
            height: 86px;
        }
        .header-top{
            line-height: 45px;
            height: 45px;
        }
        .aui-icon-left{
            padding-left:10px;
        }
        .win_title{
            width: auto;
            text-align: center;
            position: absolute;
            right: 80px;
            left: 80px;
        }

        .title{
            width: 100%;
            overflow: hidden;
            background: #fff;
            position: relative;
        }
        .ulTitle{
            padding:0 10px;
        }
        .ulTitle li{
            padding:10px 0;
            margin-right:30px;
            float: left;
        }
        .ulTitle{
            margin: 0 25px;
            overflow: hidden;
            position: relative;
        }
        .pre,
        .next{
            position: absolute;
            font-family: "auiicon" !important;
            top: 50%;
            -webkit-transform:translateY(-50%);
            transform:translateY(-50%);
            width: 30px;
            background: #fff;
            text-align: center;
            z-index: 9;
            padding:10px 0;
            /*height: 100%;*/
        }
        .pre{
            left:0px;
        }
        .next{
            right:0px;
        }
    </style>
</head>
<body>
<header class=" aui-border-b">
    <div class="header-top aui-border-b">
        <div class="aui-pull-left aui-iconfont aui-icon-left icon-left-coler" tapmode onclick="closeWin()"></div>
        <div class="win_title aui-ellipsis-1">
            新品特区
        </div>
    </div>
    <div class="title" id="headerTitle">
        <div class="divTitle">
            <!-- 头部分类 -->
            <ul class="ulTitle" >
                <li class="active" tapmode onclick="switchChange(this)">灯饰照明1</li>
                <li class="" tapmode onclick="switchChange(this)">地板2</li>
                <li class="" tapmode onclick="switchChange(this)">吊顶3</li>
                <li class="" tapmode onclick="switchChange(this)">管材4</li>
                <li class="" tapmode onclick="switchChange(this)">装饰面料5</li>
                <li class="" tapmode onclick="switchChange(this)">门窗6</li>
                <li class="" tapmode onclick="switchChange(this)">管材7</li>
                <li class="" tapmode onclick="switchChange(this)">地板8</li>
                <li class="" tapmode onclick="switchChange(this)">吊顶9</li>
                <li class="" tapmode onclick="switchChange(this)">管材10</li>
            </ul>
        </div>
        <span class="pre" tapmode onclick="pre()"><</span>
        <span class="next" tapmode onclick="next()">></span>
    </div>
</header>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/iscroll2.js"></script>
<script type="text/javascript" src="../script/jquery-1.11.3.js"></script>
<script type="text/javascript">
    apiready = function() {
        api.parseTapmode();
        var mobile = api.pageParam.mobile;
        var header = $api.dom('header');
        var searchContent= api.pageParam.content;
        if(searchContent){
            alert(searchContent)
        }
        //$api.fixStatusBar(header);
        api.setStatusBarStyle({
            style : 'light'
        });
        var header_h = $api.offset(header).h;
        var body_h = $api.offset($api.dom('body')).h - header_h;
        api.openFrame({
            name : 'newArea_frm',
            url : 'newArea_frm.html',
            rect : {
                x : 0,
                y : header_h,
                w : 'auto',
                h : body_h
            },
            pageParam : {
                mobile : mobile
            },
            bounces : true,
            vScrollBarEnabled : false,
            hScrollBarEnabled : false
        });
    }
    $(function () {
        setWidth();
        loadYanse();
    })

    function switchChange(obj){
        // 改变选择状态
        changeCheck(obj);
        var dataID=$(obj).attr("data-id");
        if(dataID){
            $('#List-content').empty();
            getData(dataID);
        }
    }
    //为了在下面的热门类别可以通用，单独出来
    function changeCheck(obj){
        $(obj).parent().find("li").removeClass("active");
        $(obj).addClass("active");
    }
    var myScroll;
    // 头部分类滚动
    function loadYanse () {
        myScroll = new IScroll('#headerTitle', {
            scrollX: true,
            scrollY: false,
            mouseWheel: true ,
            vScroll: false,
            click:true,
            beforeScrollStart: function (e) {
                if ( this.absDistX > (this.absDistY + 5 ) ) {
                    // user is scrolling the x axis, so prevent the browsers' native scrolling
                    e.preventDefault();
                }
            }
        });
    }
    // 获取分类要滚动的宽度
    function setWidth(){
        var width=0;
        $(".ulTitle").find("li").each(function(){
            width+=$(this).outerWidth(true);
        })
        $(".divTitle").width(width+70);
    }
    //单击分类的前进和后退
    function pre() {
        var tranlatex=$(".divTitle").css("transform");
        var x=parseFloat(tranlatex.substring(7).split(',')[4])-60;
        myScroll.scrollTo(x,0);
    }
    function next() {
        var tranlatex=$(".divTitle").css("transform");
        var x=parseFloat(tranlatex.substring(7).split(',')[4])+60;
        myScroll.scrollTo(x,0);
        
    }
</script>
</html>
